<template>
  <div class="contaiter">
    <p class="warning-tip">请填写国家承认的教育经历，非培训经历</p>
    <el-form
      ref="educationalExperience"
      :model="educationalExperience"
      label-position="left"
      label-width="150px"
      :rules="rules"
    >
      <el-form-item label="学校名称" required prop="schoolName">
        <span slot="label" class="left-label">
          <span calss="cn-label">学校名称</span><br />
          <span class="en-label">School</span>
        </span>
        <el-input
          v-model="educationalExperience.schoolName"
          placeholder="请输入学校名称"
          style="width: 50%"
        />
      </el-form-item>
      <el-form-item label="教育状态" required prop="educationalBackground">
        <span slot="label" class="left-label">
          <span calss="cn-label">教育状态</span><br />
          <span class="en-label">Highest Degree</span>
        </span>
        <el-select
          v-model="educationalExperience.educationalBackground"
          placeholder="请选择教育状态"
          @change="onChange"
        >
          <el-option label="大专" value="大专"> </el-option>
          <el-option label="本科" value="本科"> </el-option>
          <el-option label="硕士" value="硕士"> </el-option>
          <el-option label="博士" value="博士"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="全日制/非全日制" required>
        <span slot="label" class="left-label">
          <span calss="cn-label">全日制/非全日制</span><br />
          <span class="en-label">Full-Time/ Part-Time</span>
        </span>
        <SelectCom
          :options="educateClassy"
          @change="changeFullTime"
          :defaultValue="educationalExperience.fullTime"
        />
      </el-form-item>
      <el-form-item label="学位证书" required>
        <span slot="label" class="left-label">
          <span calss="cn-label">学位证书</span><br />
          <span class="en-label">Graduate Certificate</span>
        </span>
        <SelectCom
          :options="[
            { label: '有', value: '1' },
            { label: '无', value: '0' },
          ]"
          @change="changeDiploma"
          :defaultValue="educationalExperience.diploma"
        />
      </el-form-item>
      <el-form-item label="所学专业" required prop="major">
        <span slot="label" class="left-label">
          <span calss="cn-label">所学专业</span><br />
          <span class="en-label">Major</span>
        </span>
        <el-input
          v-model="educationalExperience.major"
          style="width: 50%"
          placeholder="请输入所学专业"
        />
      </el-form-item>
      <el-form-item label="在校时间" prop="intakeTime">
         <span slot="label" class="left-label">
          <span calss="cn-label">在校时间</span><br />
          <span class="en-label">Time Period</span>
        </span>
        <div class="flex-block">
          <el-date-picker
            v-model="educationalExperience.intakeTime"
            type="month"
            :pickerOptions="startPickerOptions"
            placeholder="开始日期"
            format="yyyy年MM月"
            valueFormat="yyyy年MM月"
            style="width: 220px"
          >
          </el-date-picker>
          <div class="line-grid">-</div>
          <el-date-picker
            v-model="educationalExperience.graduateTime"
            type="month"
            :pickerOptions="endPickerOptions"
            placeholder="毕业日期"
            :disabled="isTillNow"
            format="yyyy年MM月"
            valueFormat="yyyy年MM月"
            style="width: 220px"
          >
          </el-date-picker>
          <el-checkbox class="till-now" v-model="isTillNow"
            >至今<br />Till Now</el-checkbox
          >
        </div>
      </el-form-item>
      <el-form-item label="所在年级" required prop="grade" v-if="isTillNow">
        <span slot="label" class="left-label">
          <span calss="cn-label">所在年级</span><br />
          <span class="en-label">Grade</span>
        </span>
        <el-select
          v-model="educationalExperience.grade"
          placeholder="请选择所在年级"
          @change="onChangeGrade"
        >
        <el-option
          v-for="item in educationOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否有海外留学经历" required prop="isOverseasStudy">
        <span slot="label" class="left-label">
          <span calss="cn-label">是否有海外留学经历</span><br />
          <span class="en-label">Studied Abroad</span>
        </span>
        <el-select
          v-model="educationalExperience.isOverseasStudy"
          placeholder="请选择是否有海外留学经历"
        >
          <el-option label="无" value="无"> </el-option>
          <el-option label="有" value="有"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" ">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm('educationalExperience')"
          >确定</el-button
        >
        <el-popconfirm
          title="确定删除吗？"
          class="delete-icon"
          @confirm="deleteConfirm"
          v-if="showDel"
        >
          <i class="delete-icon" slot="reference"></i>
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { provinceAndCityData, getAreaDict, educationOptions } from "@/utils/frontDataDict.js";
import SelectCom from "./selectCom.vue";
import moment from 'moment'
export default {
  components: {
    SelectCom,
  },
  props: {},
  data() {
    return {
      startPickerOptions: {
        disabledDate: (time) => {
          let { graduateTime } = this.educationalExperience
          if (graduateTime !== '' && graduateTime !== '至今') {
            // let now = this.educationalExperience.graduateTime === '至今' ? moment() : moment(this.educationalExperience.graduateTime)
            return time.getTime() > this.fetchDateFun(graduateTime, true)
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      endPickerOptions: {
        disabledDate: (time) => {
          let { intakeTime } = this.educationalExperience
          if (intakeTime !== '') {
            return time.getTime() < this.fetchDateFun(intakeTime)
          } else {
            // return time.getTime() < Date.now()
          }
        }
      },
      isTillNow: false,
      educateClassy: [
        { label: "全日制", value: "1" },
        { label: "非全日制", value: "0" },
      ],
      diplomaOptions: [],
      provinceAndCityData,
      areaDict: [],
      educationOptions:[],
      educationalExperience: {
        // 教育经历
        schoolName: "",
        educationalBackground: "", //教育状态
        fullTime: "1", //全日制 0否 1是
        diploma: "1", //证书 0否 1是
        major: "", //专业
        graduateTime: "", //在校时间
        intakeTime: "", //入学时间
        grade: null, //所在年级   选择至今才会展示
        isOverseasStudy: '无', //是否有海外留学经历
      },
      rules: {
        schoolName: [
          { required: true, message: "请输入学校名称", trigger: "change" },
        ],
        educationalBackground: [
          { required: true, message: "请选择教育状态", trigger: "change" },
        ],
        major: [{ required: true, message: "请输入专业", trigger: "change" }],
        intakeTime: [
          { required: true, message: "请选择在校时间", trigger: "change" },
        ],
      },
      index: null,
      showDel: false,
    };
  },
  watch: {
    isTillNow(newValue) {
      if(newValue){
        let { graduateTime, newRules } = this.rules
        this.$set(this.educationalExperience, 'graduateTime', '')
        this.rules = {...newRules, grade: [
          { required: true, message: "请选择所在年级", trigger: "change" },
        ]}
      }else{
        let { grade, newRules } = this.rules
        this.rules = {...newRules, graduateTime: [
          { required: true, message: "请选择毕业日期", trigger: "change" },
        ]}
      }
      // newValue && this.$set(this.educationalExperience, 'graduateTime', '')
    },
    'educationalExperience.educationalBackground':function(newValue){
      this.educationOptions = educationOptions[['','大专','本科','硕士','博士'].findIndex(e=>e==newValue)||1].children
    }
  },
  methods: {
    businessAreaChange(e) {
      console.log(e);
    },
    onChange(e){
      this.educationalExperience.grade = null
    },
    onChangeGrade(e){
    },
    getEducationOptions(id){
      let val = ''
      educationOptions.forEach(e => {
        if(!e.children) return
        let list = e.children.filter(v=>v.value==id)
        list.length>0 &&(val = list[0].label)
      });
      return val
    },
    fetchDateFun(timeStr,type){
      timeStr = timeStr.replace("年","-")
      timeStr = timeStr.replace("月","")
      let newTime = type?new Date(timeStr) * 1 - 2592000000: new Date(timeStr) * 1 + 2592000000
      return newTime
    },
    handleCityChange(e) {
      console.log(e);
    },
    changeFullTime(e) {
      this.educationalExperience.fullTime = e;
    },
    changeDiploma(e) {
      this.educationalExperience.diploma = e;
    },
    cancel() {
      this.showDel = false;
      this.index = null;
      this.$parent.$parent.closeFun("educationalExperience");
      this.$nextTick(() => {
        this.educationalExperience = {
          schoolName: "",
          educationalBackground: "", //教育状态
          fullTime: "1", //全日制 0否 1是
          diploma: "1", //证书 0否 1是
          major: "", //专业
          graduateTime: "", //在校时间
          intakeTime: "", //入学时间
          grade: null, //所在年级   选择至今才会展示
          isOverseasStudy: '无', //是否有海外留学经历
        };
        this.$refs["educationalExperience"].clearValidate();
      });
    },
    deleteConfirm() {
      this.$parent.$parent.deleteFun(
        "educationalExperience",
        this.index
      );
      this.cancel();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.educationalExperience));
          data.graduateTime = this.isTillNow ? '至今' : data.graduateTime
          this.$parent.$parent.upDate(
            "educationalExperience",
            data,
            this.index
          );
          this.cancel();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    init(data, index) {
      data = JSON.parse(JSON.stringify(data));
      // data.intakeTime = data.intakeTime ?  data.intakeTime : ''
      data.grade = data.grade ? Number(data.grade): null
      if(data.graduateTime == '至今') {
        this.isTillNow = true
      }
      this.educationalExperience = data;
      this.index = index;
      this.showDel = true;
    },
  },
  created() {},
  mounted() {
    this.areaDict = getAreaDict();
  },
};
</script>

<style lang="scss" scoped>
.delete-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url("../../../../assets/images/delete_icon.png") no-repeat center
    center / cover;
}
.warning-tip {
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fc9c21;
  line-height: 28px;
  margin-bottom: 30px;
}
.till-now {
  vertical-align: middle;
  line-height: 40px;
  height: 40px;
  ::v-deep .el-checkbox__input {
    vertical-align: middle;
    line-height: 40px;
    top: -12px;
  }
  ::v-deep .el-checkbox__inner {
    transform: scale(1.5);
    margin: 0 20px 0 30px;
    vertical-align: middle;
  }
  ::v-deep .el-checkbox__label {
    line-height: 20px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
  }
}
.line-grid {
  width: 64px;
  height: 40px;
  line-height: 40px;
  font-size: 23px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #37383d;
  text-align: center;
}
.flex-block {
  display: flex;
  flex-flow: row nowrap;
}
</style>
